/*
 * @Author: 
 * @Date: 2022-02-10 11:48:50
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-14 14:49:14
 * @Description: react-redux - connect
 */
import { createIncrease, createIncreaseAsync, createClear } from '../../redux/module/count_redux'
import { connect } from 'react-redux'
import React, {
  useState,
  // useEffect, Component
} from 'react'
import { Select, Button, Space } from 'antd'
import { nanoid } from 'nanoid'

const { Option } = Select

const btnList = [
  {
    type: 'add',
    title: '+',
    id: nanoid()
  },
  {
    type: 'reduce',
    title: '-',
    id: nanoid()
  },
  {
    type: 'ride',
    title: '*',
    id: nanoid()
  },
  {
    type: 'beside',
    title: '%',
    id: nanoid()
  },
  {
    type: 'odd',
    title: 'increase if odd',
    id: nanoid()
  },
  {
    type: 'async',
    title: 'increase async',
    id: nanoid()
  },
  {
    type: 'clear',
    title: 'clear',
    id: nanoid()
  }
]
const optionMap = [
  { value: 1, id: nanoid(), label: '1' },
  { value: 2, id: nanoid(), label: '2' },
  { value: 3, id: nanoid(), label: '3' },
]

function CountCenter(props) {
  const [selectNum, setSelectNum] = useState(0)
  const handleChange = (e) => {
    setSelectNum(e)
  }
  const handleAction = (val) => {
    const { handleCount, count } = props
    if (count % 2 === 0 && val === 'odd') return
    handleCount(val, selectNum)
    // handleCountIncrease(selectNum)
  }
  return (
    <>
      <div>当前值为：{props.count}</div>
      <div>
        <Space style={{ display: 'flex', flexWrap: 'wrap' }}>
          <Select style={{ minWidth: 120 }} onChange={handleChange} placeholder='select'>
            {
              optionMap.map(it => {
                return <Option key={it.id} value={it.value}>{it.label}</Option>
              })
            }
          </Select>
          {
            btnList.map(it => {
              return <Button key={it.id} onClick={() => handleAction(it.type)}>{it.title}</Button>
            })
          }
        </Space>
      </div>
    </>
  )
}

export default connect(
  state => ({count: state.total}),
  dispatch => ({
    handleCount: (val, count) => {
      switch (val) {
        case 'odd':
          dispatch(createIncrease(count))
          break;
        case 'async':
          dispatch(createIncreaseAsync(count, 700))
          break;
        case 'clear':
          dispatch(createClear(0))
          break;
        default:
          dispatch({ type: val, data: count })
          break;
      }
    }
  })
)(CountCenter)
